<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view class="department-item" v-for="(item, index) in departmentList" :key="item.id"
        :class="{ active: index === currentIndex }" @click="changeIndex(index)">{{ item.name }}</view>
      <view class="department-item"></view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator v-for="child in childList" :key="child.id" hover-class="none" :url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${child.id}`" class="department-item">
        {{ child.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { departmentListApi } from '@/apis/consult';
import type { DepartData } from '@/types/consult';
import { ref,computed  } from 'vue';
defineProps<{
  type: string
  illnessType: string
}>()
const currentIndex = ref(0)
// 科室列表
const departmentList = ref<DepartData[]>([])
// ? 是一定要加  因为这里有同步方法 获取departmentList是异步方法 先执行同步再执行异步 所以可能会导致departmentList为空
const childList = computed(() => {
  return departmentList.value[currentIndex.value]?.child
})
// 获取科室列表
const getDepartmentList = async () => {
  const res = await departmentListApi()
  console.log(res);
  // 赋值一级科室列表
  departmentList.value = res
}
getDepartmentList()
// 2. 一级科室切换
// tab切换事件
const changeIndex = (index: number) => {
  currentIndex.value = index
}
</script>

<style lang="scss">
@import './index.scss';
</style>